<script>
import {toContent} from "@/js/blogUtils.js";

export default {
  name: "BlogItem",
  methods: {
    toContent,
    showContextMenu(event) {
      event.preventDefault(); // 阻止默认的右键菜单显示
      this.$emit("showContextMenu", event, this.blog);
    },
  },
  props: {
    blog: {
      type: Object,
      default: () => {}
    },
  }
}
</script>

<template>
  <div @click="toContent(blog.id)" @contextmenu="showContextMenu">
    <el-card style="width: 300px;height: 300px" shadow="hover">
      <template #header>
        <div>
          <el-row>
            <el-col :span="12">
              <el-alert v-if="blog.isRelease && blog.isRelease === 1" title="已发布" show-icon style="height: 20px;width: 100px" type="success" :closable="false" />
              <el-alert v-else title="未发布" show-icon style="height: 20px;width: 100px" type="info" :closable="false" />
            </el-col>
            <el-col :span="12" style="display: flex;justify-content: flex-end">
              <el-text size="small">{{blog.createTime.slice(0, 10)}}</el-text>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-image :src="blog.cover" style="height: 150px" />
      <template #footer>{{blog.title}}</template>
    </el-card>
  </div>
</template>

<style scoped>
</style>
